<template>
	<div class="sw_section_container" v-loading="loading">
		<div class="sw_query_form" v-if="$isHasAuth(topFrames)">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="实验名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table v-bind="tableConfig" :data="tableData" @sort-change="handleSortChange">
				<el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
				<el-table-column label="反馈状态" width="100">
					<template slot-scope="{ row }">
						<el-tag type="warning" size="medium" v-if="isFeedback(row)">未填写</el-tag>
						<el-tag type="success" size="medium" v-else>已填写</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="实验名称" min-width="180" prop="name" sortable></el-table-column>
				<el-table-column label="测量技术" min-width="150" prop="filed1" sortable></el-table-column>
				<el-table-column label="实验机时" min-width="90" :formatter="applyHourFormmatter"></el-table-column>
				<el-table-column label="实验PI" min-width="90" :formatter="piNameFormatter"></el-table-column>
				<el-table-column label="操作" :width="$controlWidth(tableButton)" v-if="$isHasAuth(tableButton)">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" v-hasPermi="'25bd663cfb6844758245a5d4e690198c'" @click="handleLookData(row.id)">详情</el-button>
						<el-button size="medium" type="text" v-hasPermi="'cf57330cd37e44e7937c9e892771364f'" @click="handleDataFeedback(row.id)">
							反馈
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
		</template>
		<feedback-form v-model="feedbackDialog" :data-id="feedbackId" @finish="queryTableData"></feedback-form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import feedbackForm from './feedback';
import { queryFeedPageList } from '@/api/business/tbExperiment';
export default {
	components: { feedbackForm },
	props: {
		userRole: { type: String, default: '' },
		dataType: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			dataCount: 0,
			tableData: [],
			queryData: { page: 1, limit: 15 },
			feedbackId: '',
			feedbackDialog: false,
			tableConfig: {
				ref: 'table',
				size: 'medium',
				height: '100%',
				class: 'index_table_wrapper'
			}
		};
	},
	computed: {
		...mapGetters(['principalData']),
		experimentId() {
			return this.$route.query.expid;
		},
		topFrames() {
			return ['adda99b126b548c3bdf4de6d741a220e'];
		},
		tableButton() {
			return ['25bd663cfb6844758245a5d4e690198c', 'cf57330cd37e44e7937c9e892771364f'];
		}
	},
	watch: {
		experimentId: {
			handler(val) {
				this.queryTableData();
				if (!val) return false;
				this.feedbackId = val;
				this.feedbackDialog = true;
			},
			immediate: true
		}
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await queryFeedPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询表格数据
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		isFeedback(data) {
			return Number(data.hasFeed) === 0;
		},

		applyHourFormmatter(data) {
			return data.machineHour || '--';
		},

		piNameFormatter(data) {
			let info = this.principalData.find((n) => n.id === data.filed2);
			return !info ? '--' : info.userName;
		},

		//实验反馈
		handleDataFeedback(id) {
			this.feedbackId = id;
			this.feedbackDialog = true;
		},
		handleLookData(id) {
			let query = { id };
			this.$router.push({ path: `/${this.userRole}/${this.dataType}/detail`, query });
		},
		//排序
		handleSortChange(data) {
			let propData = data.prop.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
			if (data.order === 'ascending') {
				this.$set(this.queryData, 'sortStr', `${propData} asc`);
			} else if (data.order === 'descending') {
				this.$set(this.queryData, 'sortStr', `${propData} desc`);
			} else {
				this.$delete(this.queryData, 'sortStr');
			}
			this.$set(this.queryData, 'page', 1);
			this.queryTableData();
		}
	}
};
</script>

<style lang="scss" scoped></style>
